<template>
  <div>
  	<shop-header :is-show-icon="isShowIcon">	
			<h2>{{ title }}</h2>
			<span @click="handleAddress" class="save-address">保存</span>	
		</shop-header>
		<div class="address-wrapper">
			<group gutter="0">
				<x-input class="input" title="姓名" ref="input01" :min="2" :max="15" required placeholder="最少两个，最多十五个字" v-model="username"></x-input>
				<x-input class="input" title="电话" ref="input02" is-type="china-mobile" :min="7" :max="13" required placeholder="不少于7位" v-model="phone"></x-input>
				<x-input class="input" title="地区" @click.native="doShowAddress" disabled ref="input03" required placeholder="省份 城市 县区" :value="areaDetail(area)"></x-input>
				<x-address style="display: none;" title="地区" v-model="area" raw-value :list="addressData" :show.sync="showAddress"></x-address>
				<x-input class="input" title="地址" ref="input04" :min="5" :max="50" required placeholder="最少5个，最多50个字" v-model="address"></x-input>
			</group>
			<check-icon class="check-icon" :value.sync="isDefaultAddress">设置成默认收货地址</check-icon>
		</div>
  </div>
</template>

<script>
import { Group, Cell, XInput, XAddress, ChinaAddressV4Data, Value2nameFilter as value2name, CheckIcon } from 'vux'	
import ShopHeader from '@/components/public/ShopHeader'
import http from '@/utils/http'
export default {
	components: {
		ShopHeader,
		Group,
		Cell,
		XInput,
		XAddress,
		CheckIcon
	},
  data () {
  	return {
  		isShowIcon: false,
  		showAddress: false,
  		isDefaultAddress: false,
      title: '新建收货地址',
  		username: '',
  		phone: '',
  		address: '',
  		addressData: [],
  		area: [],
      addressArr: []
  	}
  },
  methods: {
  	onBlur1 (value,$event) {
      this.isUserId = this.$refs.input01.valid
    },
    doShowAddress () {
      this.showAddress = true
    },
    areaDetail (value) {
      this.addressArr = (value2name(value, this.addressData)).split(' ')
    	return value2name(value, this.addressData)
    },
    getChinaAddress () {
      http.get('/api/v1/getChinaAddress', {}, false, res => {
        if (res.status == 1) {
          this.addressData = res.data
        }
      })
    },
    handleAddress () {
      let params = {
        name: this.username,
        phone: this.phone,
        province: this.addressArr[0],
        city: this.addressArr[1],
        county: this.addressArr[2],
        detailInfo: this.address,
        isDefault: this.isDefaultAddress
      };
      let method = '';
      if (this.$route.params.type == 'edit') {
        method = 'updateAddress';
        params.id = this.$route.query.id;
      }else {
        method = 'addAddress';
      }
      http.post('/api/v1/' + method, params, false, res => {
        if (res.status == 1) {
          this.$vux.toast.show({
            type: 'success',
            text: res.msg,
            width: 'auto',
            position: 'middle'
          });
          setTimeout(() => {
            this.$router.push({ path: '/my/address' })
          }, 2000)
        }else {
          this.$vux.toast.show({
            type: 'warn',
            text: res.msg,
            width: 'auto',
            position: 'middle'
          });
        }
      });
    }
  },
  mounted () {
    let id = this.$route.query.id
    if (this.$route.params.type == 'edit') {
      this.title = '编辑收货地址'
    }
    this.getChinaAddress()
    if (id) {
      http.get('/api/v1/getOneAddress', { id }, false, res => {
        if (res.status == 1) {
          this.username = res.data.name
          this.phone = res.data.phone
          this.area = [res.data.province, res.data.city, res.data.county]
          this.address = res.data.detailInfo
          this.isDefaultAddress = res.data.isDefault
        }
      })
    }
  }
}
</script>

<style scoped>
.save-address {
  position: absolute;
  right: 15px;
  top: 6px;
  width: 30px;
  height: 30px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #666;
}
.input {
  color: #666;
  padding: 12px 15px;
}
.area-cell {
	font-size: 14px;
}
.check-icon {
	font-style: 14px;
	color: #666;
	padding: 10px 12px;
}
.disabled {
  color: #666!important;
}
</style>
